<template>
	<view>

		<view class="msg">
			<view class="">
				<image class="hp" src="http://imcdn.shimaruanchuang.cn/chat/1707989092855aW70IeavYhlBb437a43394fffa902af1a09ef3649a40.png"></image>
				<view class="username">
					{{userInfo.nickName}}
				</view>
				<view class="level"  >
					等级 {{userLevel}}
				</view>
				 
			</view>
		</view>
		<view class="" style="font-size: 23rpx; color:#d3dcdc ; padding-left: 500rpx;padding-top: 10rpx;">
			剩余解锁次数： {{userInfo.unlockNum}}次
		</view>

		<view class="content">
			<view class="tltle"> 
				等级说明:
			</view>
			<view class="levelDetails" v-for="item,index in levenData" >
				 <view class="1" style="">
				 	等级{{item.level}}： 解锁任意音频{{item.gather}}集 <br />
				 </view>
				 <view class="2" style="padding-right: 70rpx;">
				 	{{item.money}}元
				 </view>
			</view>
			<view class="levelDetails9">
				等级9： 解锁任意音频                  1008 元<br />
			</view>

			<view class="input">
				<uni-easyinput :inputBorder="false" :styles="styles" placeholder="请输入充值金额:"
					v-model="money"></uni-easyinput>
			</view>
			<view class="btn">
				<button class="mini-btn" type="primary" size="mini" @click="goMoney">立即充值</button>
			</view>


			<view class="service">
				<view class="1">
					此平台更多的是展示古今中外各种类型的故事的魅力，整理、创作、配音不易，感谢珍惜。其它意愿，请联系官方客服：
				</view>

				<view class="2">
					感谢支持！
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		findAll,
		selectOne,
		
		WeChatPay
	} from "../../config/api.js"
	export default {
		data() {
			return {
				userName: "用户名",

				levenData: [],
				styles: {
					color: '#fff9f9',
					borderColor: '#999999',
				},
				money: null,
				historyUserInfo: {},
				userInfo: {},
				openId: "",
				wxData: {},
				//剩余可解锁次数
				unlockNum:0,
				//用户等级
				userLevel: 0 
			}
		},
		onShow() {
			this.findAllFun();
			this.history();
			this.getUserInfo();
		},
		methods: {


			goMoney() {
				this.WeChatPayFun();
			},
			WeChatPayFun() {
				let that = this
				let param = {
					payValue: that.money
				}
				if (that.money == null ) {
					uni.showToast({
						title: "请输入充值金额",
						icon: "error"
					})
					return;
				};
				WeChatPay({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					if (res.code == 200 && res.data != null) {
						console.log("res.data：", res.data);
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.packageValue,
							signType: 'MD5',
							paySign: res.data.paySign,
							success(res) {
								console.log('success:' + JSON.stringify(res));
							},
							fail(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						})
					}
				}).catch((e) => {
					console.log("e:", e);
				})

			},
			getUserInfo() {
				let that = this
				let param = {
					id: that.historyUserInfo.id
				}
				selectOne({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					
					that.userInfo = res.data
					if(that.userInfo.levelSet==null){
						that.userLevel="0"
					}else{
					that.userLevel=that.userInfo.levelSet.level	
					}
					
					 
					console.log(that.userInfo);
				}).catch((e) => {})
			},
			findAllFun() {
				let param = {}
				findAll({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					let indexToRemove = 8;
					this.levenData = res.data
					this.levenData.splice(indexToRemove, 8);
					// console.log(this.levenData);
				}).catch((e) => {})
			},
			history() {
				this.historyUserInfo = uni.getStorageSync("userInfo")
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #222222;
	}

	.msg {
		width: 750rpx;
		height: 60rpx;

		.hp {
			width: 50rpx;
			height: 50rpx;
			padding-left: 60rpx;
			display: inline-flex;
			color: #d3dcdc;
		}

		.username {
			display: inline-flex;
			font-size: 43rpx;
			color: #d3dcdc;
			padding-left: 50rpx;

		}

		.level {

			display: inline-flex;
			font-size: 43rpx;
			color: #d3dcdc;
			padding-left: 270rpx;
		}
	}

	.content {


		.input {
			background-color: #626262;
			width: 600rpx;
			position: relative;
			/* 相对于其正常文档流进行定位 */
			left: 80rpx;
			top: 30rpx;

		}

		.btn {
			position: relative;
			/* 相对于其正常文档流进行定位 */
			left: 80rpx;
			top: 38rpx;
		}

		.tltle {
			color: #b0a190;
			padding-top: 20rpx;
			padding-left: 50rpx;
			font-size: 50rpx;
		}

		.levelDetails {
			 display: flex; /* 设置容器为flex布局 */
			        justify-content: space-between; /* 在主轴上分配空间并且两边对齐 */
			color: #b0a190;
			line-height: 2.0;
			margin-top: 15rpx;
			margin-left: 80rpx;
			
		}

		.levelDetails9 {
			color: #b0a190;
			line-height: 2.0;
			padding-top: 15rpx;
			padding-left: 80rpx;
			white-space: pre;
		}

		.service {
			width: 650rpx;
			margin-left: 7%;
			margin-top: 7%;
			font-size: 26rpx;
			color: #8e8e8e;
			position: relative;
			/* 相对于其正常文档流进行定位 */
			// left: 50rpx;
			// top: 100rpx;


			.1 {
				position: relative;
				/* 相对于其正常文档流进行定位 */
				left: 50rpx;
			}

		}
	}
</style>